<template>
	<div>
		<md-toolbar class="md-dense" md-elevation="0">
			<span class="md-body-1">{{seriesName}}{{getLangText(label.chartTitle)}}</span>
			<span class="md-toolbar-section-end">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button class="md-icon-button" @click="sendStyle">
					<i :class="['iconfont',isShow?'iconsave':'iconright']"></i>
				</md-button>
			</span>
		</md-toolbar>
		<div v-if="isShow">
			<div style="padding:0 8px;">
				<md-field>
					<label>{{getLangText(label.name)}}</label>
					<md-input v-model="scatterSeries.name"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.symbol)}}</label>
					<md-select v-model="scatterSeries.symbol">
						<md-option :key="item.en" :value="item.en" v-for="item in symbol">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<md-field>
					<label>{{getLangText(label.symbolSize)}}</label>
					<md-input v-model="scatterSeries.symbolSize"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.symbolRotate)}}</label>
					<md-input v-model="scatterSeries.symbolRotate"></md-input>
				</md-field>

				<div class="table-row-item">
					<span>{{getLangText(label.showSymbol)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="scatterSeries.showSymbol"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.showAllSymbol)}}</label>
					<md-select v-model="scatterSeries.showAllSymbol">
						<md-option :key="item.en" :value="item.en" v-for="item in showList">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>
			</div>
			<label-style
				:lang-type="langType"
				:option="scatterSeries.label"
				@label-style-result="onLabelStyle"
			></label-style>
			<item-style
				:lang-type="langType"
				:option="scatterSeries.itemStyle"
				@item-style-result="onItemStyle"
			></item-style>

			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)"
				:option="scatterSeries.emphasis.label"
				@label-style-result="onLabelStyleEmphasis"
			></label-style>
			<item-style
				:lang-type="langType"
				:item-name="getLangText(label.emphasis)"
				:option="scatterSeries.emphasis.itemStyle"
				@item-style-result="onItemStyleEmphasis"
			></item-style>

			<mark-point
				:lang-type="langType"
				:option="scatterSeries.markPoint"
				@mark-point-result="onMarkPoint"
			></mark-point>
			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.markPoint)"
				:option="scatterSeries.markPoint.label"
				@label-style-result="onLabelStyleMarkPoint"
			></label-style>
			<item-style
				:lang-type="langType"
				:item-name="getLangText(label.markPoint)"
				:option="scatterSeries.markPoint.itemStyle"
				@item-style-result="onItemStyleMarkPoint"
			></item-style>
			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)+getLangText(label.markPoint)"
				:option="scatterSeries.markPoint.emphasis.label"
				@label-style-result="onLabelStyleMarkPointEmphasis"
			></label-style>
			<item-style
				:lang-type="langType"
				:item-name="getLangText(label.emphasis)+getLangText(label.markPoint)"
				:option="scatterSeries.markPoint.emphasis.itemStyle"
				@item-style-result="onItemStyleMarkPointEmphasis"
			></item-style>

			<mark-line :lang-type="langType" :option="scatterSeries.markLine" @mark-line-result="onMarkLine"></mark-line>
			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.markLine)"
				:option="scatterSeries.markLine.label"
				@label-style-result="onLabelStyleMarkLine"
			></label-style>
			<label-style
				:lang-type="langType"
				:label-name="getLangText(label.emphasis)+getLangText(label.markLine)"
				:option="scatterSeries.markLine.emphasis.label"
				@label-style-result="onLabelStyleMarkLineEmphasis"
			></label-style>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.markLine)"
				:option="scatterSeries.markLine.lineStyle"
				@line-style-result="onLineStyleMarkLine"
			></line-style>
			<line-style
				:lang-type="langType"
				:line-name="getLangText(label.emphasis)+getLangText(label.markLine)"
				:option="scatterSeries.markLine.emphasis.lineStyle"
				@line-style-result="onLineStyleMarkLineEmphasis"
			></line-style>
		</div>
	</div>
</template>
<script>
	import LabelStyle from "@/components/comp/LabelStyle";
	import ItemStyle from "@/components/comp/ItemStyle";
	import LineStyle from "@/components/comp/LineStyle";
	import AreaStyle from "@/components/comp/AreaStyle";
	import MarkPoint from "@/components/comp/MarkPoint";
	import MarkLine from "@/components/comp/MarkLine";
	export default {
		name: "ScatterSeries",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			},
			seriesName: {
				type: String,
				default: ""
			}
		},
		components: {
			"label-style": LabelStyle,
			"item-style": ItemStyle,
			"line-style": LineStyle,
			"area-style": AreaStyle,
			"mark-point": MarkPoint,
			"mark-line": MarkLine
		},
		data: () => ({
			label: {
				chartTitle: { zh: "散点图", en: "scatterChart" },
				symbol: { zh: "标记图形", en: "symbol" },
				symbolSize: { zh: "标记大小", en: "symbolSize" },
				name: { zh: "系列名称", en: "name" },
				symbolRotate: { zh: "标记旋转", en: "symbolRotate" },
				showSymbol: { zh: "标记显示", en: "showSymbol" },
				showAllSymbol: { zh: "显示所有标记", en: "showAllSymbol" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },
				stack: { zh: "数据堆叠", en: "stack" },
				step: { zh: "阶梯线图", en: "step" },
				smooth: { zh: "平滑曲线", en: "smooth" },
				label: { zh: "标签", en: "label " },
				position: { zh: "位置", en: "position" },
				distance: { zh: "与图形距离", en: "distance" },
				rotate: { zh: "旋转", en: "rotate" },
				formatter: { zh: "模板", en: "formatter" },
				emphasis: { zh: "强调", en: "emphasis" },
				markPoint: { zh: "标注点", en: "MarkPoint" },
				markLine: { zh: "标注线", en: "markLine" },
			},
			isShow: false,
			scatterSeries: {
				type: "scatter",
				name: "",
				symbol: "emptyCircle",
				symbolSize: 4,
				symbolRotate: "",
				showSymbol: true,
				showAllSymbol: "auto",				
				label: {
					
				},
				itemStyle: {},
				emphasis: {
					label: {
						
					},
					itemStyle: {}
				},
				markPoint: {
					data: [],
					label: {},
					itemStyle: {},
					emphasis: {
						label: {},
						itemStyle: {}
					}
				},
				markLine: {
					data: [],
					label: {},
					lineStyle: {},
					emphasis: {
						label: {},
						lineStyle: {}
					}
				}
			},
			labelPosition: [
				{ zh: "上侧", en: "top" },
				{ zh: "左侧", en: "left" },
				{ zh: "右侧", en: "right" },
				{ zh: "下侧", en: "bottom" },
				{ zh: "内部", en: "inside" },
				{ zh: "内左", en: "insideLeft" },
				{ zh: "内右", en: "insideRight" },
				{ zh: "内上", en: "insideTop" },
				{ zh: "内下", en: "insideBottom" },
				{ zh: "内上左", en: "insideTopLeft" },
				{ zh: "内下左", en: "insideBottomLeft" },
				{ zh: "内上右", en: "insideTopRight" },
				{ zh: "内下右", en: "insideBottomRight" }
			],
			showList: [
				{ zh: "自动", en: "auto" },
				{ zh: "是", en: true },
				{ zh: "否", en: false }
			],
			symbol: [
				{ zh: "无", en: "none" },
				{ zh: "空心圆形", en: "emptyCircle" },
				{ zh: "圆形", en: "circle" },
				{ zh: "方形", en: "rect" },
				{ zh: "圆角方形", en: "roundRect" },
				{ zh: "三角形", en: "triangle" },
				{ zh: "图钉", en: "pin" },
				{ zh: "箭头", en: "arrow" },
				{ zh: "钻石", en: "diamond" }
			],
			originOption:'',
			isParse:false
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();					
				}

			},
			scatterSeries:{
            deep:true,
            handler(){
			   if(this.isShow&&!this.isParse)
			   this.$emit("series-result", JSON.parse(JSON.stringify(this.scatterSeries)));
            }
        }
		},
		methods: {
			onMarkPoint(result) {
				for(var key in result){
					this.scatterSeries.markPoint[key] = result[key];
				}
				
			},
			onMarkLine(result) {
				for(var key in result){
					this.scatterSeries.markLine[key] = result[key];
				}
				
			},
			
			onLabelStyle(result) {
				this.scatterSeries.label = result;
			},
			onItemStyle(result) {
				this.scatterSeries.itemStyle = result;
			},
			
			onLabelStyleEmphasis(result) {
				this.scatterSeries.emphasis.label = result;
			},
			onItemStyleEmphasis(result) {
				this.scatterSeries.emphasis.itemStyle = result;
			},
			onLabelStyleMarkPoint(result) {
				this.scatterSeries.markPoint.label = result;
			},
			onLabelStyleMarkLine(result){
				this.scatterSeries.markLine.label=result;
			},
			onLabelStyleMarkLineEmphasis(result){
				this.scatterSeries.markLine.emphasis.label=result;
			},
			onItemStyleMarkPoint(result) {
				this.scatterSeries.markPoint.itemStyle = result;
			},
			onLabelStyleMarkPointEmphasis(result) {
				this.scatterSeries.markPoint.emphasis.label = result;
			},
			onItemStyleMarkPointEmphasis(result) {
				this.scatterSeries.markPoint.emphasis.itemStyle = result;
			},
			onLineStyleMarkLine(result) {
				this.scatterSeries.markLine.label = result;
			},
			onLineStyleMarkLineEmphasis(result) {
				this.scatterSeries.markLine.emphasis.label = result;
			},
			
			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("series-result", JSON.parse(JSON.stringify(this.scatterSeries)));
				}
			},
			parseObj() {
				if(!this.option||JSON.stringify(this.option)=='{}')return;
				this.isParse=true;
				for (var key in this.option) {
					this.scatterSeries[key] = this.option[key];
				}
				this.originOption=JSON.stringify(this.scatterSeries);
				var that=this;
				setTimeout(() => {
					that.isParse=false;
				}, 100);
			},
		colseOption() {
				this.isShow = false;
				if (this.originOption != JSON.stringify(this.scatterSeries)) {
					this.$emit("series-result", this.scatterSeries);
				}
			},
			listenEvent() {
				this.app.$on("close-option", this.colseOption);
			},
			offEvent() {
				this.app.$off("close-option", this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
		},
		beforeDestroy() {
			this.offEvent();
		}
		}
</script>
